import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Card, Button, Checkbox, Form, Input } from 'antd';
import { _login } from '@/api/sysUser';
import md5 from 'js-md5';
import styles from './index.less';
import { history } from 'umi';

export default function LoginPage() {
  const onFinish = async (values: any) => {
    const res = await _login({
      username: values.username,
      password: md5(md5(values.password) + 'bby'),
    });
    if (res.code === 200) {
      window.localStorage.setItem('userInfo', JSON.stringify(res.data));
      history.push('/');
    }
  };
  return (
    <div className={styles.login_bg}>
      <Card className={styles.login_cantainer}>
        <h3 className={styles.login_title}>智慧渔场水产养殖平台</h3>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入账号!' }]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="请输入账号"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="请输入密码"
            />
          </Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>记住密码</Checkbox>
          </Form.Item>

          <Form.Item className={styles.login_btn}>
            <Button
              block
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              登陆
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}
